<template>
  <div class="public main-box">
    <!-- 左面菜单 -->
    <MenuVue />
    <!-- 右边盒子 -->
    <div class="main-right-box">
      <!-- 右边上方头部 -->
      <div class="main-right-header">
        <!-- 当前路由标题 -->
        <div class="main-right-header-title"> {{ title }}</div>
        <!-- 右侧登录详情 -->
        <div class="main-right-header-login">
          <!-- 头像 -->
          <div class="main-right-header-login-logo">
            <img :src="Icon" alt="">
            <!-- 退出登录 -->
            <el-icon>
              <ArrowDown @click="adminClose" />
            </el-icon>
          </div>
          <!-- 文本信息 -->
          <div class="main-right-header-login-title">
            <p>Uuuta</p>
            <p><span>超级管理员</span></p>
          </div>
        </div>
        <!-- 弹出框 -->
        <div class="login-box" v-show="isShow">
          <div class="login-box-user">
            <p>Uuuta</p>
            <p>超级管理员</p>
          </div>
          <div class="login-box-title" @click="editPwd">修改密码</div>
          <div class="login-box-title" @click="quitLogin">退出系统</div>
        </div>
      </div>
      <!-- 右边主体内容 -->
      <div class="main-right-body">
        <!-- 路由出口 -->
        <RouterView />
      </div>
    </div>
  </div>
</template>

<script setup>
import MenuVue from "../../components/MainView/MainMenu.vue";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
import { Dormitory, MainManage } from '../../router'
import { onBeforeMount, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Icon from './icon.png'
// 获取当前路由的地址信息
const router = useRoute();
// 获取路由的titile名
console.log('path', router.fullPath)
const title = ref("");
// const created = (() => {
  if (router.fullPath === '/main/home') {
    title.value = '首页'
  } else if (router.fullPath === '/main/changePsd') {
    title.value = '• 修改密码 ChangePsd'
  } else {
    // 合并路由列表
    Dormitory.push.apply(Dormitory, MainManage);
    // 遍历查询路由的name
    const NameList = Dormitory.find(item => item.path === router.fullPath)
    title.value = NameList.name
  }
// })

console.log(title.value)



// 点击事件
const isShow = ref(false)
const adminClose = () => {
  isShow.value = !isShow.value
  // console.log(isShow)
}
function editPwd() {
  ElMessage({
    message: '你点击了修改密码',
    type: '修改密码',
  })
}
// 退出系统
const quitLogin = () => {
  ElMessageBox.confirm(
    '确定要退出系统吗？',
    '退出确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '退出成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消退出',
      })
    })
}
</script>

<style lang="scss" scoped>
.main-box {
  display: flex;
  background: rgba(246, 247, 252, 1);

  .main-box-menu {
    width: 301px;
    height: 100%;
    border-right: 1px solid #dcdfe6;
    background: #fff;
  }

  .main-right-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;

    .main-right-header {
      width: 100%;
      height: 50px;
      padding: 0 15px;
      background: #fff;
      position: relative;
      display: flex;
      border-radius: 20px;
      justify-content: space-between;
      align-items: center;

      .main-right-header-login {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .main-right-header-login-logo {
          display: flex;
          align-items: center;
          padding: 0 10px;
          justify-content: space-between;

          img {
            width: 30px;
            height: 100%;
            margin-right: 10px;
          }

        }

        .main-right-header-login-title {
          // margin: 0 20px;

          p {
            text-align: center;
            font-size: 14px;

            span {
              color: #CC99FF;
            }
          }
        }
      }

      .login-box {
        width: 200px;
        height: 120px;
        margin: 0;
        font-size: 14px;
        top: 50px;
        right: 100px;
        border: 1px solid #ccc;
        position: absolute;
        display: flex;
        flex-direction: column;
        padding-bottom: 5px;
        justify-content: space-between;
        color: #000;
      }

      .login-box-user {
        padding: 10px 15px;
        width: 100%;
        height: 60px;
        background: #F39C12;
        color: #fff;
      }

      .login-box-title {
        height: 25px;
        font-size: 12px;
        padding-left: 15px;
        display: flex;
        align-items: center;
      }

      .login-box-title:hover {
        background: rgba(0, 0, 0, 0.1);
      }
    }


    .main-right-body {
      margin-top: 10px;
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 20px;
    }
  }
}
</style>
